<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="/layui-v2.6.4/layui/css/layui.css" media="all" rel="stylesheet">
    <script charset="UTF-8" src="/js/jquery-3.5.1.min.js"></script>
    <script charset="utf-8" src="/layui-v2.6.4/layui/layui.js"></script>
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="edit">更改状态</a>
</script>
<script th:inline="javascript" type="text/javascript">
    var adminAuthor = /*[[${session.loginAdmin.getAdminLevel()}]]*/
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#test',
                url: 'getUserMessage',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    }
                },
                page: true,
                limits: [3, 5, 10, 20],
                limit: 10,
                toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                height: 'full-3',
                defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                title: '管理员数据表',
                cols: [
                    [{
                        type: 'checkbox',
                        fixed: 'left'
                    }, {
                        field: 'userId',
                        title: '用户id',
                        width: 80,
                        edit: 'text'
                    }, {
                        field: 'userPhone',
                        title: '账号/手机号',
                        width: 120,
                        edit: 'text'
                    }, {
                        field: 'userEmail',
                        title: '邮箱',
                        width: 130,
                        edit: 'text',
                        sort: true
                    }, {
                        field: 'userName',
                        title: '姓名',
                        width: 110,
                        edit: 'text',
                    }, {
                        field: 'userPname',
                        title: '昵称',
                        width: 110,
                        edit: 'text',
                    }, {
                        field: 'userSex',
                        title: '性别',
                        width: 110,
                        edit: 'text'
                    }, {
                        field: 'userMoney',
                        title: '余额',
                        width: 110,
                        edit: 'text'
                    }, {
                        field: 'userRole',
                        title: '角色',
                        width: 110,
                        edit: 'text'
                    }, {
                        field: 'status',
                        title: '状态',
                        width: 110,
                        edit: 'text',
                        style: 'color:#269220'
                    }, {
                        fixed: 'right',
                        title: '操作',
                        toolbar: '#barDemo',
                        width: 200
                    }]
                ]
            });
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.msg('这是管理员申请通过面板');
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    layer.confirm("是否封禁或者解封", function (index) {
                        $.ajax({
                            url: "/upUserStatus"
                            , type: 'get'
                            , async: false
                            , data: {
                                userId: data.userId,
                                status: data.status
                            }
                            , success: function (res) {
                                if (res === "1") {
                                    if (data.status == '正常') {
                                        obj.update({
                                            status: "封禁"
                                        });
                                    } else {
                                        obj.update({
                                            status: "正常"
                                        });
                                    }
                                    layer.msg("操作成功")
                                    layer.close(index);
                                } else if (res === "0") {
                                    layer.msg("操作失败")
                                }
                            }
                        });
                    })
                }
            });
        });
</script>

</body>
</html>
